﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>人员信息查询</title>
    <link href="../../css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
    <link href="../../css/font-awesome.min.css?v=4.3.0" rel="stylesheet">
    <link href="../../css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../../css/animate.min.css" rel="stylesheet">
    <link href="../../css/style.min.css?v=3.2.0" rel="stylesheet">
    <link href="../../css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link href="../../css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="../../css/plugins/colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">
    <link href="../../css/plugins/cropper/cropper.min.css" rel="stylesheet">

    <link href="../../vcss/plugins/switchery/switchery.css" rel="stylesheet">

    <link href="../../css/plugins/jasny/jasny-bootstrap.min.css" rel="stylesheet">

    <link href="../../css/plugins/nouslider/jquery.nouislider.css" rel="stylesheet">


    <link href="../../css/plugins/ionRangeSlider/ion.rangeSlider.css" rel="stylesheet">
    <link href="../../css/plugins/ionRangeSlider/ion.rangeSlider.skinFlat.css" rel="stylesheet">

    <link href="../../css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">

    <link href="../../css/plugins/clockpicker/clockpicker.css" rel="stylesheet">

    <!-- jqgrid-->
    <link href="../../css/plugins/jqgrid/ui.jqgrid.css" rel="stylesheet">
    <!-- 全局js -->
    <script src="../../js/jquery-2.1.1.min.js"></script>
    <script src="../../js/bootstrap.min.js?v=3.4.0"></script>
    <script>
    $(function () {
        $("#navbar").load('/ts/navbar.html');
        $("#data_5 .input-daterange").datepicker({ keyboardNavigation: false, forceParse: false, autoclose: true });
    });
    </script>

    <style>
        .navbar-header {
            width: 150px;
        }

        .top-navigation .navbar-nav .open .dropdown-menu > li > a, .top-navigation .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 20px;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="gray-bg top-navigation">
        <div id="wrapper">
            <div id="page-wrapper" class="gray-bg">
                <div class="row border-bottom white-bg">
                    <nav class="navbar navbar-static-top" role="navigation">
                        <div class="navbar-header">
                            <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                                <i class="fa fa-reorder"></i>
                            </button>
                            <a href="../index.html" class="navbar-brand">LOGO</a>
                        </div>
                        <div class="navbar-collapse collapse" id="navbar">

                            <!--脚本引入菜单页-->
                        </div>
                    </nav>
                </div>
                <div class="wrapper wrapper-content animated fadeInRight">
                    <!--查询表单-->
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5>查询条件</h5>
                                    <div class="ibox-tools">
                                        <a class="collapse-link">
                                            <i class="fa fa-chevron-up"></i>
                                        </a>
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="userInfoSeach.html#">
                                            <i class="fa fa-wrench"></i>
                                        </a>
                                        <ul class="dropdown-menu dropdown-user">
                                            <li>
                                                <a href="userInfoSeach.html#">选项1</a>
                                            </li>
                                            <li>
                                                <a href="userInfoSeach.html#">选项2</a>
                                            </li>
                                        </ul>
                                        <a class="close-link">
                                            <i class="fa fa-times"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="ibox-content">
                                    <form role="form" class="form-inline">

                                        <div class="form-group" id="data_5">
                                            <label >创建时间</label>
                                            <div class="input-daterange input-group" id="datepicker">
                                                <input type="text" class="input-sm form-control" name="start" value="2017-06-14" />
                                                <span class="input-group-addon">到</span>
                                                <input type="text" class="input-sm form-control" name="end" value="2017-06-14" />
                                            </div>
                                        </div>
                                        &nbsp;&nbsp;&nbsp;&nbsp;

                                        <div class="form-group">
                                            <label for="exampleInputEmail2" >用户名</label>
                                            <input type="text" placeholder="请输入用户名" id="exampleInputEmail2" class="form-control">
                                        </div>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <div class="form-group">
                                            <label for="exampleInputPassword2" >工号</label>
                                            <input type="text" placeholder="请输入工号" id="exampleInputPassword2" class="form-control">
                                        </div>
                                        
                                        </br>
                                        <label style="margin-top:5px;">岗位选择</label>
                                          <select class="form-control" style="width: 200px;">
                                              <option>会计</option>
                                              <option>软件</option>
                                              <option>前台</option>
                                              <option>行政</option>
                                              <option>翻译</option>
                                          </select>


                                       <div class="checkbox m-l m-r-xs"></div>
                                        <button class="btn btn-sm btn-primary" style="margin-top:5px;" type="submit">查询</button>

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--查询数据-->
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="ibox ">
                                <div class="ibox-content">
                                
                                    <h4>人员信息</h4>
                                     
                                    <div class="jqGrid_wrapper">
                                        <table id="table_list_1"></table>
                                        <div id="pager_list_1"></div>
                                    </div>
                                    <p>&nbsp;</p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
       
   
   
    <!-- 自定义js -->
    <script src="../../js/content.min.js?v=1.0.0"></script>
    <!-- ChartJS-->
    <script src="../../js/plugins/chartJs/Chart.min.js"></script>
    <!-- Flot -->
    <script src="../../js/plugins/flot/jquery.flot.js"></script>
    <script src="../../js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="../../js/plugins/flot/jquery.flot.resize.js"></script>
    <!-- Peity -->
    <script src="../../js/plugins/peity/jquery.peity.min.js"></script>
    <!-- Peity demo -->
    <script src="../../js/demo/peity-demo.min.js"></script>
    <!-- jqGrid -->
    <script src="../../js/plugins/jqgrid/i18n/grid.locale-cn.js"></script>
    <script src="../../js/plugins/jqgrid/jquery.jqGrid.min.js"></script>
    
    <!-- Chosen -->
    <script src="../../js/plugins/chosen/chosen.jquery.js"></script>

    <!-- JSKnob -->
    <script src="../../js/plugins/jsKnob/jquery.knob.js"></script>

    <!-- Input Mask-->
    <script src="../../js/plugins/jasny/jasny-bootstrap.min.js"></script>

    <!-- Data picker -->
    <script src="../../js/plugins/datapicker/bootstrap-datepicker.js"></script>

    <!-- Prettyfile -->
    <script src="../../js/plugins/prettyfile/bootstrap-prettyfile.js"></script>

    <!-- NouSlider -->
    <script src="../../js/plugins/nouslider/jquery.nouislider.min.js"></script>

    <!-- Switchery -->
    <script src="../../js/plugins/switchery/switchery.js"></script>

    <!-- IonRangeSlider -->
    <script src="js/plugins/ionRangeSlider/ion.rangeSlider.min.js"></script>

    <!-- iCheck -->
    <script src="../../js/plugins/iCheck/icheck.min.js"></script>

    <!-- MENU -->
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>

    <!-- Color picker -->
    <script src="../../js/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>

    <!-- Clock picker -->
    <script src="../../js/plugins/clockpicker/clockpicker.js"></script>

    <!-- Image cropper -->
    <script src="../../js/plugins/cropper/cropper.min.js"></script>

    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function () {
            //列表数据
        $.jgrid.defaults.styleUI = "Bootstrap";
        var a = [{ id: "1", create_date: "2010-05-24", name: "test", job_number: "0111", major: "英语", post: "翻译", note: "123" },
            { id: "2", create_date: "2010-05-25", name: "test2", job_number: "0112", major: "英语", post: "翻译", note: "320.00" },
            { id: "3", create_date: "2007-09-01", name: "test3", job_number: "0113", major: "英语", post: "翻译", note: "430.00" },
            { id: "4", create_date: "2007-10-04", name: "test", job_number: "0114", major: "英语", post: "翻译", note: "210.00" },
            { id: "5", create_date: "2007-10-05", name: "test2", job_number: "0115", major: "英语", post: "翻译", note: "320.00" },
            { id: "6", create_date: "2007-09-06", name: "test3", job_number: "0116", major: "英语", post: "翻译", note: "430.00" },
            { id: "7", create_date: "2007-10-04", name: "test", job_number: "0117", major: "英语", post: "翻译", note: "210.00" },
            { id: "8", create_date: "2007-10-03", name: "test2", job_number: "0118", major: "英语", post: "翻译", note: "320.00" },
            { id: "9", create_date: "2007-09-01", name: "test3", job_number: "0119", major: "英语", post: "翻译", note: "430.00" },
            { id: "11", create_date: "2007-10-01", name: "test", job_number: "0120", major: "英语", post: "翻译", note: "210.00" },
            { id: "12", create_date: "2007-10-02", name: "test2", job_number: "0121", major: "英语", post: "翻译", note: "320.00" },
            { id: "13", create_date: "2007-09-01", name: "test3", job_number: "0122", major: "英语", post: "翻译", note: "430.00" },
            { id: "14", create_date: "2007-10-04", name: "test", job_number: "0123", major: "英语", post: "翻译", note: "210.00" },
            { id: "15", create_date: "2007-10-05", name: "test2", job_number: "0124", major: "英语", post: "翻译", note: "320.00" },
            { id: "16", create_date: "2007-09-06", name: "test3", job_number: "0125", major: "英语", post: "翻译", note: "430.00" },
            { id: "17", create_date: "2007-10-04", name: "test", job_number: "0126", major: "英语", post: "翻译", note: "210.00" },
            { id: "18", create_date: "2007-10-03", name: "test2", job_number: "0127", major: "英语", post: "翻译", note: "320.00" },
            { id: "19", create_date: "2007-09-01", name: "test3", job_number: "0128", major: "英语", post: "翻译", note: "430.00" },
            { id: "21", create_date: "2007-10-01", name: "test", job_number: "0129", major: "英语", post: "翻译", note: "210.00" },
            { id: "22", create_date: "2007-10-02", name: "test2", job_number: "0130", major: "英语", post: "翻译", note: "320.00" },
            { id: "23", create_date: "2007-09-01", name: "test3", job_number: "0131", major: "英语", post: "翻译", note: "430.00" },
            { id: "24", create_date: "2007-10-04", name: "test", job_number: "0132", major: "英语", post: "翻译", note: "210.00" },
            { id: "25", create_date: "2007-10-05", name: "test2", job_number: "0133", major: "英语", post: "翻译", note: "320.00" },
            { id: "26", create_date: "2007-09-06", name: "test3", job_number: "0134", major: "英语", post: "翻译", note: "430.00" },
            { id: "27", create_date: "2007-10-04", name: "test", job_number: "0135", major: "英语", post: "翻译", note: "210.00" },
            { id: "28", create_date: "2007-10-03", name: "test2", job_number: "0136", major: "英语", post: "翻译", note: "320.00" },
            { id: "29", create_date: "2007-09-01", name: "test3", job_number: "0137", major: "英语", major: "翻译", note: "430.00" }];
        $("#table_list_1").jqGrid({
            data: a, datatype: "local", height: 250, autowidth: true, shrinkToFit: true, rowNum: 14, rowList: [10, 20, 30],
            colNames: ["序号", "创建日期", "姓名", "工号", "专业", "岗位", "备注"],
            colModel: [{ name: "id", index: "id", width: 60, sorttype: "int" },
                { name: "create_date", index: "create_date", width: 90, sorttype: "date", formatter: "date" },
                { name: "name", index: "name", width: 100 },
                { name: "job_number", index: "job_number", width: 80, sorttype: "int"},
                { name: "major", index: "major", width: 80},
                { name: "post", index: "post", width: 80},
                { name: "note", index: "note", width: 150, sortable: false }],
            pager: "#pager_list_1",
            viewrecords: true,
            caption: "人员基本信息",
            hidegrid: false
        });

        $(window).bind("resize", function () {
            var b = $(".jqGrid_wrapper").width();
            $("#table_list_1").setGridWidth(b)
        })
    });
    </script>

   <!-- <script type="text/javascript" src="../../../../tajs.qq.com/stats@sId=9051096.html" charset="UTF-8"></script>-->
    <!--统计代码，可删除-->
</body>
</html>